<template>
	<view class="detail">
		<swiper class="pictrue" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in info.images" :key="index">
				<view class="swiper-item">
					<image :src="item" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
<!-- 		<view class="pictrue">
			 <image src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/banner01%20(1).png" mode=""></image>
		</view> -->
		<view class="title line2 fs-34 color333 bold">
			{{ info.title }}
		</view>
		
		<view class="serve-nav">
			<view class="bor-bot py30 pl30 fs-30">智慧养老套装包含服务：</view>
			<view class="text">
				<block v-for="(item,index) in info.fuwuData" :key="index">
					<view>{{ item.title }}: {{ item.num }}{{ item.danwei }}</view>
				</block>
			</view>
		</view>
		
		<view class="content">
			<view class="bold fs-30">智慧养老介绍：</view>
			<view class="mt30">
				<view>
					<image style="width: 690rpx;" :src="content_image" mode="widthFix"></image>
				</view>
				<!-- <parser :html="description" ref="article" :tag-style="tagStyle"></parser> -->
			</view>
		</view>
		<view style="width: 100%;height: 250rpx;"></view>
		
		<view class="footer acea-row row-between-wrapper">
			<!-- <view class="acea-row row-middle row-center row-column"> -->
				<view class="acea-row row-middle row-center row-column" @click="reduce(info.id)" v-if="info.is_shoucang==1">
					<text class="iconfont icon-shoucangxuanzhong"></text>
					<text class="mt10 fs-30">取消收藏</text>
				</view>
				<view class="acea-row row-middle row-center row-column" @click="add(info.id)" v-else>
					<text class="iconfont icon-shoucang"></text>
					<text class="mt10 fs-30">点击收藏</text>
				</view>
				
			<!-- </view> -->
			<view class="acea-row row-middle">
				<view class="kefu" @click="makePhone()">联系客服</view>
				<view class="yuyue" @click="yuyue()">点击预约</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	import{
		taocanDetails,
		relation,
		cancelcollect
	} from '@/api/admin.js'
	import parser from "@/components/jyf-parser/jyf-parser";
	export default {
		components:{
			parser
		},
		data() {
			return {
				id:'',
				info:[],
				description:'',
				content_image:'',
			};
		},
		onLoad(option){
			this.id = option.id;
			this.getdata();
			
		},
		methods:{
			reduce(id){
				cancelcollect({ shop_id:id }).then(res=>{
					this.getdata();
				})
			},
			add(id){
				relation({ shop_id:id }).then(res=>{
					this.getdata();
				})
			},
			getdata(){
				let that = this;
				taocanDetails({ id:that.id }).then(res=>{
					that.info = res.data.data;
					that.description = res.data.data.content;
					that.content_image = res.data.data.content_image;
				})
			},
			yuyue(){
				 uni.navigateTo({
				 	url:'/pages/reservation/reser-confirm?id=' + this.id
				 })
			},
			makePhone(){
				uni.makePhoneCall({
					phoneNumber: app.globalData.phone //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss">
	.detail{
		
		.pictrue{
			width: 750rpx;
			height: 600rpx;
			background-color: #eeeeee;
			
			.swiper-item{
				width: 750rpx;
				height: 600rpx;
			}
			
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.title{
			width: 100%;
			padding: 30rpx;
			background-color: #ffffff;
		}
		
		.serve-nav{
			width: 100%;
			background-color: #ffffff;
			margin-top: 30rpx;
			
			.text{
				padding: 30rpx;
				font-size: 28rpx;
				line-height: 50rpx;
			}
		}
		
		.content{
			width: 100%;
			padding: 30rpx;
			background-color: #ffffff;
			margin-top: 30rpx;
			font-size: 26rpx;
		}
		
		.footer{
			width: 100%;
			background-color: #ffffff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 30rpx;
			
			.icon-shoucang{
				font-size: 50rpx;
			}
			.icon-shoucangxuanzhong{
				font-size: 50rpx;
				color: #FD7D36;
			}
			.kefu{
				width: 240rpx;
				height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				background: rgba(253, 125, 54, 0.2);
				color: #FD7D36;
				font-size: 30rpx;
			}
			.yuyue{
				width: 240rpx;
				height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				background: #FD7D36;
				color: #ffffff;
				font-size: 30rpx;
				margin-left: 30rpx;
			}
		}
		
		
	}
</style>
